<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>05_事件委派-应用场景2-添加新的对象具备老的对象的行为</title>
    </head>
    <body>
        <ul>
            <li>程程</li>
            <li>王艳</li>
            <li>小宇宙</li>
            <li>苗</li>
            <li>欢总</li>
            <li>欣哥</li>
        </ul>

        <button>尚硅谷女老师都是我的</button>

        <script>
            // 需求：点击button添加li  让所有的li有移入高亮


            // 添加li
            var btn = document.querySelector('button');

            var ul = document.querySelector('ul');

            btn.onclick = function(){
                console.log(11111111);
                var li = document.createElement('li');
                li.innerHTML = '琪琪';
                ul.append(li);
            }

            console.log(22222222);

            // 移入高亮
            var li_list = document.querySelectorAll('li');
            console.log(li_list.length);

            for(var i = 0; i < li_list.length; i++){
                li_list[i].onmouseover = function(){
                    this.style.backgroundColor = 'tomato';
                }

                li_list[i].onmouseout = function(){
                    this.style.backgroundColor = '';
                }
            }

            console.log(333333);
        </script>
    </body>
</html>